<script setup lang="ts">
import { reactive,ref,watch } from "vue";
import dayjs from 'dayjs';
import type {DateDataType} from "./index.d"
import {useSettingStore} from "@/stores/index"
import { useRouter,useRoute } from 'vue-router'
import { useTopSelectStore } from "@/stores/topSelect"
import { useIndicatorStore } from "@/stores/indicator"

const topSelectStore = useTopSelectStore()
const indicatorStore = useIndicatorStore()

const route = useRoute()
const dateData = reactive<DateDataType>({
  dateDay: "",
  dateYear: "",
  dateWeek: "",
  timing: setInterval(() => {}, 1000) // 初始化为一个有效的 Timer
});

const year = ref<string>(String(topSelectStore.getTime))
const citys = ref<string[]>(topSelectStore.getSelectArea)
const cityList = ref(topSelectStore.getArea)

const { setSettingShow} =useSettingStore()
const weekday= ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]

const showFilter = ref(false)

const checkAll = ref(false)
const indeterminate = ref(false)

const timeFn = () => {
  dateData.timing = setInterval(() => {
    dateData.dateDay = dayjs().format("YYYY-MM-DD hh : mm : ss");
    dateData.dateWeek = weekday[dayjs().day()];
  }, 1000);
};
timeFn()

watch(() => route.path, (newPath) => {
  if(newPath === '/index'){
    showFilter.value = true
  }else{
    showFilter.value = false
  }
},{
  immediate: true,
  deep: true
})

// 选择年份
const changeYear = (value:any) => {
  topSelectStore.change({
    key:'time',
    value:value
  })
}

// 选择区县
const changeCity = (value:any) => {
  topSelectStore.change({
    key:'selectArea',
    value:value
  })
}

// 初始化选中状态
const initSelectState = () => {
  const selectedAreas = topSelectStore.getSelectArea
  if (selectedAreas.length === 0) {
    // 如果没有选择，则全选所有区县
    citys.value = cityList.value.map(item => item.value)
    checkAll.value = true
    indeterminate.value = false
  } else {
    // 如果选择了具体区县
    citys.value = selectedAreas
    if (selectedAreas.length === cityList.value.length) {
      checkAll.value = true
      indeterminate.value = false
    } else {
      checkAll.value = false
      indeterminate.value = selectedAreas.length > 0
    }
  }
}

// 页面加载时初始化
initSelectState()

watch(citys, (val) => {
  if (val.length === 0) {
    checkAll.value = false
    indeterminate.value = false
  } else if (val.length === cityList.value.length) {
    checkAll.value = true
    indeterminate.value = false
  } else {
    checkAll.value = false
    indeterminate.value = true
  }
})

const handleCheckAll = (val: any) => {
  indeterminate.value = false
  const isChecked = Boolean(val)
  if (isChecked) {
    // 全选时，选择所有区县
    citys.value = cityList.value.map((item) => item.value)
  } else {
    // 取消全选时，清空选择
    citys.value = []
  }
  // 手动触发 changeCity 更新 store
  changeCity(citys.value)
}

// 初始化全选
handleCheckAll(true)

const disabledDate = (date: any) => {
  return date.getFullYear() > new Date().getFullYear();
};
</script>

<template>
  <div class="d-flex jc-center title_wrap">
    <div class="zuojuxing"></div>
    <div class="youjuxing"></div>
    <div class="guang">
      <div class="select-container cus-picker" v-if="showFilter" >
        <el-date-picker 
          popper-class = "cus-picker"
          v-model="year" 
          format="YYYY" 
          value-format="YYYY"   
          style="width: 120px;margin-right: 10px;" 
          type="year" 
          placeholder="选择年份" 
          :disabled-date="disabledDate"
          @change="changeYear" 
        />
        <!-- <el-select
          v-model="citys"
          multiple
          clearable
          collapse-tags
          placeholder="请选择"
          popper-class="custom-header"
          :max-collapse-tags="1"
          style="width: 180px"
          @change="changeCity"
        >
          <template #header>
            <el-checkbox
              v-model="checkAll"
              :indeterminate="indeterminate"
              @change="handleCheckAll"
            >
              全市
            </el-checkbox>
          </template>
          <el-option
            v-for="item in cityList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->
      </div>
    </div>
    <div class="d-flex jc-center">
      <div class="title">
        <span class="title-text">广州市城市体检评估信息系统</span>
      </div>
    </div>
    <div class="timers">
      {{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }}

      <div class="setting_icon"   @click="setSettingShow(true)">
          <img src="@/assets/img/headers/setting.png" alt="设置">
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.title_wrap {
  height: 60px;
  background-image: url("../assets/img/top.png");
  background-size: cover;
  background-position: center center;
  position: relative;
  margin-bottom: 4px;

  .guang {
    position: absolute;
    top: 30px;
    left: 20px;
    background-image: url("../assets/img/guang.png");
    background-position: 80px center;
    width: 100%;
    height: 56px;
    pointer-events: auto;
    z-index: 10;
    

  }

  .zuojuxing,
  .youjuxing {
    position: absolute;
    top: -2px;
    width: 140px;
    height: 6px;
    background-image: url("../assets/img/headers/juxing1.png");
  }

  .zuojuxing {
    left: 11%;
  }

  .youjuxing {
    right: 11%;
    transform: rotate(180deg);
  }

  .timers {
    position: absolute;
    right: 0;
    top: 30px;
    font-size: 18px;
    display: flex;
    align-items: center;

    .setting_icon {
      width: 20px;
      height: 20px;
      cursor: pointer;
      margin-left: 12px;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
.title {
  position: relative;
  // width: 500px;
  text-align: center;
  background-size: cover;
  color: transparent;
  height: 60px;
  line-height: 46px;

  .title-text {
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 6px;
    width: 100%;
    background: linear-gradient(
      92deg,
      #0072ff 0%,
      #00eaff 48.8525390625%,
      #01aaff 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}




// :deep(.el-input__wrapper) {
//   background: #18243a !important;
//   border: 1px solid #00eaff !important;

//   .el-input__inner{
//     color: #fff ;
//   }

//   .el-input__icon{
//     color: #fff !important;
//   }

//   .el-picker-panel__body{
//     background: #000 !important;
//   }
//   // color: #00eaff !important;
// }
</style>
